<template>
	<div class="dashboard-container">
		<el-card style="height: 120px; margin-bottom: 20px">
			<!-- 给el-form绑定form -->
			<el-form label-width="120px" :model="form" :inline="true">
				<el-form-item label="日期">
					<el-date-picker start-placeholder="开始日期" end-placeholder="结束日期" @change="dateChange"
						value-format="timestamp" v-model="dateRange" type="daterange" placeholder="请选择" />
				</el-form-item>
				<el-form-item label="门店操作人员">
					<el-input v-model="form.shanghuuserid" placeholder="门店操作人员ID" clearable />
				</el-form-item>
				<el-form-item label="类型">
					<el-select v-model="form.state" placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="searchclick"
					style="margin-left: 12px">筛选</el-button>
				<el-button @click="resetSearch">重置</el-button>
				<el-button @click="export_list" type="success">导出</el-button>
			</el-form>

			<!-- <view class="">
				<h1>对对对对对</h1>
				
			</view> -->
		</el-card>

		<el-table :data="tableData" border>
			<el-table-column prop="id" label="ID" align="center"> </el-table-column>
			<el-table-column prop="shanghuuserid" label="门店操作人员ID" align="center">
			</el-table-column>
			<el-table-column prop="state" label="点击对象" align="center">
				<template slot-scope="scope">
					<el-tag type="success" v-if="scope.row.state=='1'">合作案例</el-tag>
					<el-tag type="warning" v-if="scope.row.state=='2'">使用说明</el-tag>
					<el-tag type="danger" v-if="scope.row.state=='3'">客服</el-tag>
					<el-tag type="error" v-if="scope.row.state=='4'">发起团购</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="addtime" label="点击时间" align="center">
				<template slot-scope="scope">
					{{ scope.row.addtime | datefilter}}
				</template>
			</el-table-column>

		</el-table>

		<!-- <Pagination :currentPage="this.form.pageNo" :size="this.form.pageSize" :total="total" @changelimit="changelimit"
			@changecurrentPage="changecurrentPage"></Pagination> -->
		<el-pagination @current-change="changecurrentPage" :current-page="form.pageNo" :page-size="form.pageSize"
			layout="total, prev, pager, next, jumper" :total="total">
		</el-pagination>
	</div>
</template>

<script>
	import {
		logdianjilist
	} from '@/api/docment_function'
	export default {
		name: "Dashboard",
		data() {
			return {
				form: {
					inttime: '',
					endtime: '',
					state: '',
					shanghuuserid: '',
					pageNo: 1,
					pageSize: 10,
				},
				total: 0,
				tableData: [],
				hdd: 4,
				dateRange: [],
				options: [{
					value: '0',
					label: '全部 '
				}, {
					value: '1',
					label: '合作案例 '
				}, {
					value: '2',
					label: '使用说明 '
				}, {
					value: '3',
					label: '客服 '
				}, 
				{
					value: '4',
					label: '发起团购 '
				},]
			};
		},
		filters: {
			datefilter(val) {
				if (val) {
					var date = new Date(parseInt(val) * 1000);
					var Year = date.getFullYear();
					var Moth =
						date.getMonth() + 1 < 10 ?
						"0" + (date.getMonth() + 1) :
						date.getMonth() + 1;
					var Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
					var Hour =
						date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
					var Minute =
						date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
					var Sechond =
						date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
					var GMT = Year + "-" + Moth + "-" + Day +
						"   " +
						Hour +
						":" +
						Minute +
						":" +
						Sechond;

					return GMT;
				} else {
					return "";
				}
			},
		},
		methods: {
			dateChange(e) {
				this.form.inttime = e[0]
				this.form.endtime = e[1]
			},
			getSimpleText(html) {
				var re1 = new RegExp("<.+?>", "g"); //匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
				var msg = html.replace(re1, ""); //执行替换成空字符
				return msg;
			},
			searchclick() {
				this.getList();
			},
			resetSearch() {
				this.form.inttime = "";
				this.form.endtime = "";
				this.form.state = '';
				this.form.shanghuuserid = '';
				this.dateRange = [];
				this.getList();
			},
			addrenyuan() {
				this.$refs.add.add();
			},
			// 子传父:自定义事件
			refresh() {
				this.getList();
			},
			async getList() {
				// let result = await getmarketlist(this.form);
				let result = await logdianjilist({
					inttime: this.form.inttime == '' ? 0 : this.form.inttime / 1000,
					endtime: this.form.endtime == '' ? 0 : this.form.endtime / 1000,
					state: this.form.state == "" ? 0 : parseInt(this.form.state),
					shanghuuserid: this.form.shanghuuserid == "" ? 0 : parseInt(this.form.shanghuuserid),
					pageNo: this.form.pageNo,
					pageSize: this.form.pageSize,
				});


				console.log(result);
				if (result.code == 0) {
					this.tableData = result.data.data;
					this.total = result.data.totalCount;
					if (result.data.data != null) {
						result.data.data.forEach((item) => {
							if (item.status == 1) {
								this.$set(item, "switch", true);
							} else {
								this.$set(item, "switch", false);
							}
						});
					}
				}
			},
			changelimit(val) {
				this.form.pageSize = val;
				this.getcouponlist1();
			},
			changecurrentPage(val) {
				this.form.pageNo = val;
				this.getList();
			},
			changerenyuan(val) {
				this.$refs.add.edit(val);
			},
			// 导出点击记录列表
			async export_list() {
				if (this.form.inttime == '' || this.form.endtime == '') {
					this.$message({
						message: '请选择起始时间',
						type: 'warning',
					})
					return
				}
				let param = {
					inttime: Math.floor(new Date(this.form.inttime).getTime()/1000),
					endtime: Math.floor(new Date(this.form.endtime).getTime()/1000),
					state:this.form.state,
					shanghuuserid:this.form.shanghuuserid
				};
				console.log('xxxxxxxxxxxxx',param)
				// this.$router.push({ path: "https://api.suishilian.com/admin/exceldc", query: param });
				const externalLinkWithParams =
					`https://dscc.suishilian.com/admin/exceldj?inttime=${param.inttime}&endtime=${param.endtime}&state=${param.state}&shanghuuserid=${param.shanghuuserid}`;
				window.location.href = externalLinkWithParams;
			},

		},
		watch: {
			"form.uid": {
				handler(newVal) {
					if (newVal == "") {
						this.getList();
					}
				},
			},
		},
		mounted() {
			this.getList();
		},
		// created() {
		//   this.$nextTick(() => {
		//     this.form.uid = Number(this.$route.query.uid);
		//     // 获取服务
		//     this.getservetypes1();
		//   });
		// },
	};
</script>

<style lang="scss" scoped>
	.dashboard {
		&-container {
			margin: 30px;
		}

		&-text {
			font-size: 30px;
			line-height: 46px;
		}
	}
</style>